<template>
  <div>
    <el-card style="border-radius: 12px">
      <!-- tab标签页 -->
      <el-tabs type="border-card" v-model="activeTab">
        <el-tab-pane label="已批准" name="accept">
          <el-table border stripe :data="successMeetingData">
            <el-table-column
              width="40px"
              align="center"
              type="index"
              prop="index"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="会议号"
              prop="roomNumber"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="会议室"
              prop="roomName"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="申请人"
              prop="application"
            ></el-table-column>
            <el-table-column
              align="center"
              label="会议主题"
              prop="name"
            ></el-table-column>
            <el-table-column
              width="130px"
              align="center"
              label="申请人联系方式"
              prop="userMobile"
            ></el-table-column>
            <el-table-column
              align="center"
              label="开始时间"
              prop="startTime"
            ></el-table-column>
            <el-table-column
              align="center"
              label="结束时间"
              prop="endTime"
            ></el-table-column>
            <el-table-column
              label="申请日期"
              align="center"
              prop="createTime"
            ></el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
            style="margin-top: 10px"
            v-model:current-page="pageNo"
            v-model:page-size="limit"
            :page-sizes="[5, 10, 15, 20]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper, -> ,total, sizes"
            :total="totalsuccess"
            @size-change="handleSizeSuccessChange"
            @current-change="getsuccessMeetingData"
          />
        </el-tab-pane>
        <el-tab-pane label="拒绝" name="reject">
          <el-table border stripe :data="failMeetingData">
            <el-table-column
              width="40px"
              align="center"
              type="index"
              prop="index"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="会议号"
              prop="roomNumber"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="会议室"
              prop="roomName"
            ></el-table-column>
            <el-table-column
              width="80px"
              align="center"
              label="申请人"
              prop="application"
            ></el-table-column>
            <el-table-column
              align="center"
              label="会议主题"
              prop="name"
            ></el-table-column>
            <el-table-column
              width="130px"
              align="center"
              label="申请人联系方式"
              prop="userMobile"
            ></el-table-column>
            <el-table-column
              align="center"
              label="开始时间"
              prop="startTime"
            ></el-table-column>
            <el-table-column
              align="center"
              label="结束时间"
              prop="endTime"
            ></el-table-column>
            <el-table-column
              label="申请日期"
              align="center"
              prop="createTime"
            ></el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
            style="margin-top: 10px"
            v-model:current-page="pageNo"
            v-model:page-size="limit"
            :page-sizes="[5, 10, 15, 20]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper, -> ,total, sizes"
            :total="totalfail"
            @size-change="handleSizeFailChange"
            @current-change="getfailMeetingData"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
  ResponseData,
  meetingLists,
  MeetingInformationResponseData,
} from '@/api/meeting/type'
import { reqMeetingPageData } from '@/api/meeting'

let activeTab = ref('accept')
// 当前页码
let pageNo = ref<number>(1)
// 定义每页展示数据
let limit = ref<number>(5)
// 定义展示数据的总数
let totalsuccess = ref<number>(0)
let totalfail = ref<number>(0)
// 搜索框信息
let roomId = ref<string>()
let roomName = ref<string>()
let application = ref<string>()
// 获取审核通过的会议信息
let successMeetingData = ref<meetingLists>([])
// 获取审核未通过的会议信息
let failMeetingData = ref<meetingLists>([])

// 组件挂载完毕
onMounted(() => {
  getsuccessMeetingData()
  getfailMeetingData()
})
// 更改分页器大小
const handleSizeSuccessChange = () => {
  getsuccessMeetingData()
}
const handleSizeFailChange = () => {
  getsuccessMeetingData()
}
const getsuccessMeetingData = async (page: number = 1) => {
  pageNo.value = page
  let params = {
    roomName: roomName.value ? roomName.value : '',
    startTime: null,
    endTime: null,
    application: application.value ? application.value : '',
    roomNumber: roomId.value ? roomId.value : '',
    isExaminestate: 1,
    currentPage: pageNo.value,
    pageSize: limit.value,
  }
  let result: MeetingInformationResponseData = await reqMeetingPageData(params)
  console.log(result)
  if (result.code == 200) {
    totalsuccess.value = result.data.total
    successMeetingData.value = result.data.records
  }
}

const getfailMeetingData = async (page: number = 1) => {
  pageNo.value = page
  let params = {
    roomName: roomName.value ? roomName.value : '',
    startTime: null,
    endTime: null,
    application: application.value ? application.value : '',
    roomNumber: roomId.value ? roomId.value : '',
    isExaminestate: 0,
    currentPage: pageNo.value,
    pageSize: limit.value,
  }
  let result: any = await reqMeetingPageData(params)
  console.log(result)
  if (result.code == 200) {
    totalfail.value = result.data.total
    failMeetingData.value = result.data.records
  }
}
</script>

<style scoped lang="scss"></style>
